<template>
	<view>
		<view>
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
				swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" :style="height">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y  @scrolltolower="onreachBottom">
					<view class="appointAll" v-for="(item,index) in appointmentVenue">
						<view class="myVenueName">
							<text>{{item.placename}}</text>
						</view>
						<view class="myVenueStatus">
							<text>{{item.state}}</text>
						</view>
						<view class="myVenueStart">
							<text>起始：{{item.starttime}}</text>
						</view>
						<view class="myVenueEnd">
							<text>结束：{{item.endtime}}</text>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y  @scrolltolower="onreachBottom">
					<view class="appointAll" v-for="(item,index) in appointmentshenghe">
						<view class="myVenueName">
							<text>{{item.placename}}</text>
						</view>
						<view class="myVenueStatus">
							<text>{{item.state}}</text>
						</view>
						<view class="myVenueStart">
							<text>起始：{{item.starttime}}</text>
						</view>
						<view class="myVenueEnd">
							<text>结束：{{item.endtime}}</text>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y @scrolltolower="onreachBottom">
					<view class="appointAll" v-for="(item,index) in appointmentSuccess">
						<view class="myVenueName">
							<text>{{item.placename}}</text>
						</view>
						<view class="myVenueStatus">
							<text>{{item.state}}</text>
						</view>
						<view class="myVenueStart">
							<text>起始：{{item.starttime}}</text>
						</view>
						<view class="myVenueEnd">
							<text>结束：{{item.endtime}}</text>
						</view>
						<view class="myNews">
							<text>等待使用</text>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y @scrolltolower="onreachBottom">
					<view class="appointAll" v-for="(item,index) in appointmentNow">
						<view class="myVenueName">
							<text>{{item.placename}}</text>
						</view>
						<view class="myVenueStatus">
							<text>{{item.state}}</text>
						</view>
						<view class="myVenueStart">
							<text>结束：{{item.endtime}}</text>
						</view>
						<view class="myVenueWarning">
							<text>距离结束还有：{{item.hour}}时{{item.minute}}分{{item.second}}秒</text>
						</view>
						<view class="myFinish" @click="item.goodsname==null?FinishVenue1(index):FinishVenue2(index)">
							结束使用
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y @scrolltolower="onreachBottom">
					<view class="appointAll" v-for="(item,index) in appointmentFinish">
						<view class="myVenueName">
							<text>{{item.placename}}</text>
						</view>
						<view class="myVenueStatus">
							<text>{{item.state}}</text>
						</view>
						<view class="myVenueStart">
							<text>起始：{{item.starttime}}</text>
						</view>
						<view class="myVenueEnd">
							<text>结束：{{item.endtime}}</text>
						</view>
						<view class="myVenueFinish">
							<text
								:class="item.finish==='按时归还'?'u-type-success-disabled':'u-type-error-disabled'">{{item.finish}}</text>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<!-- <script src="https://unpkg.com/dayjs"></script> -->
<script>
	// import dayjs from 'dayjs';
	export default {
		data() {
			return {
				list: [{
						name: '全部'
					}, {
						name:'正在审核'
					},
					{
						name: '等待使用'
					}, {
						name: '正在使用',
					},
					{
						name: '预约完成',
					},
				],
				venueheight: 0,
				height:"",
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的.
				appointmentVenue: [
				],
				appointmentshenghe:[],
				appointmentSuccess: [],
				appointmentNow: [],
				appointmentFinish: [],
			}
		},
		onTabItemTap(e){
			// // console.log(e);
			this.shuaxing()
		},
		onLoad() {          
			// this.shuaxing()
			this.liveCountTimes = setInterval(() => {
				for (var i = 0; i < this.appointmentNow.length; i++) {
					this.getLiveTimeCount(i, this.appointmentNow[i].endtime);
				}
				this.$forceUpdate();
			}, 1000);
			this.NowTimeCounts = setInterval(() => {
				for (var i = 0; i < this.appointmentSuccess.length; i++) {
					this.SuccessNowTimeCount(i, this.appointmentSuccess[i].starttime);
				}
				this.$forceUpdate();
			}, 1000);
			
		},
		methods: {
			async getAppointmentVenue() {
				const res = await this.$myRequest({
					url: 'PlaceappointmentController/queryallappointment',
					data:{
						userid:getApp().globalData.userid
					}
				})
				console.log(res);
				for(var i=0;i<res.data[0].length;i++){
					let goodsname=null;
					let transedPreTimeEnd = res.data[0][i].endtime.replace(/-/g, '/') //这里转化时间格式为以/分隔形式
					let nowTime = new Date().getTime();
					let preTimeEnd = new Date(transedPreTimeEnd).getTime();
					if(res.data[0][i].judge<2&&preTimeEnd-nowTime<0)continue;
					this.appointmentVenue.push(res.data[0][i])
					res.data[0][i].placename=res.data[0][i].place.placename;
				}
				
				for(var i=0;i<res.data[1].length;i++){
					let transedPreTimeEnd = res.data[1][i].endtime.replace(/-/g, '/') //这里转化时间格式为以/分隔形式
					let nowTime = new Date().getTime();
					let preTimeEnd = new Date(transedPreTimeEnd).getTime();
					if(res.data[1][i].judge<2&&preTimeEnd-nowTime<0)continue;
					res.data[1][i].placename=res.data[1][i].goods.goodsname;
					res.data[1][i].goodsname=res.data[1][i].goods.goodsname;
					// res.data[1][i].etime=dayjs(res.data[1][i].endtime).format("YYYY-MM-DD HH:mm:ss")
					res.data[1][i].hour=null;
					res.data[1][i].minute=null;
					res.data[1][i].second=null;
					this.appointmentVenue.push(res.data[1][i])
				}
				for (var i = 0; i < this.appointmentVenue.length; i++) {
					let transedPreTimeStart = this.appointmentVenue[i].starttime.replace(/-/g, '/') //这里转化时间格式为以/分隔形式
					let transedPreTimeEnd = this.appointmentVenue[i].endtime.replace(/-/g, '/') //这里转化时间格式为以/分隔形式
					let nowTime = new Date().getTime();
					let preTimeStart = new Date(transedPreTimeStart).getTime();
					let preTimeEnd = new Date(transedPreTimeEnd).getTime();
					if(preTimeEnd - nowTime > 0&&this.appointmentVenue[i].judge<2){
						this.appointmentVenue[i].state = "正在审核"
						this.appointmentshenghe.push(this.appointmentVenue[i]);
					}
					else if(preTimeEnd-nowTime<0&&this.appointmentVenue[i].judge<2){
						console.log(this.appointmentVenue.length)
						this.appointmentVenue.splice(i,1)
						console.log(this.appointmentVenue.length)
						continue;
					}
					else if (preTimeStart - nowTime > 0&&this.appointmentVenue[i].judge==2) {
						this.appointmentVenue[i].state = "等待使用"
						this.appointmentSuccess.push(this.appointmentVenue[i]);
					} 
					else if ((preTimeStart - nowTime <= 0 && preTimeEnd - nowTime > 0&&this.appointmentVenue[i].finish===null&&this.appointmentVenue[i].judge==2) || (preTimeEnd - nowTime < 0&&this.appointmentVenue[i].finish===null&&this.appointmentVenue[i].judge==2)){
						console.log(this.appointmentVenue[i].finish);
						this.appointmentVenue[i].state = "正在使用"
						this.appointmentNow.push(this.appointmentVenue[i]);
					}
					 else if (this.appointmentVenue[i].finish !== null&&this.appointmentVenue[i].judge==2) {
						this.appointmentVenue[i].state = "预约完成"
						this.appointmentFinish.push(this.appointmentVenue[i]);
					}
				}
				this.venueheight=11.3*this.appointmentVenue.length;
				this.height="height:"+this.venueheight+"vh";
				// console.log(this.height);
			},
			tabsChange(index) {
				this.shuaxing()
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-viewfffdsaf
			onreachBottom() {

			},
			countDown(time) {
				var nowTime = +new Date();
				var inputTime = +new Date(time);
				var times = (inputTime - nowTime) / 1000;
				var h = parseInt(times / 60 / 60 % 24);
				h = h < 10 ? '0' + h : h;
				this.appointmentNow[index].hour = h;
				var m = parseInt(times / 60 / 60 % 24);
				m = m < 10 ? '0' + m : m;
				this.appointmentNow[index].minute = m;
				var s = parseInt(times % 60);
				s = s < 10 ? '0' + s : s;
				this.appointmentNow[index].secend = s;
			},
			getLiveTimeCount(index, endTime) {
				//注：不论安卓还是ios，请将时间如 2020-02-02 20:20:20 转化为 2020/02/02 20:20:20 这种形式后再使用，否则无法转换，如下转换即可↓
				let transedPreTime = endTime.replace(/-/g, '/') //这里转化时间格式为以/分隔形式
				let nowTime = new Date().getTime();
				let preTime = new Date(transedPreTime).getTime()
				let obj = null;
				if (preTime - nowTime > 0) {
					let time = (preTime - nowTime) / 1000;
					let day = parseInt(time / (60 * 60 * 24));
					let hou = parseInt(time % (60 * 60 * 24) / 3600);
					let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
					let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
					obj = {
						day: day < 10 ? '0' + day : day,
						hou: hou < 10 ? '0' + hou : hou,
						min: min < 10 ? '0' + min : min,
						sec: sec < 10 ? '0' + sec : sec
					};
					this.appointmentNow[index].hour = hou;
					this.appointmentNow[index].minute = min;
					this.appointmentNow[index].second = sec;
					// console.log(this.appointmentNow);
					
				} else {
					this.appointmentNow[index].hour = "0";
					this.appointmentNow[index].minute = "0";
					this.appointmentNow[index].second = "0";
					let time = (nowTime-preTime) / 1000;
					let day = parseInt(time / (60 * 60 * 24));
					let hou = parseInt(time % (60 * 60 * 24) / 3600);
					let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
					let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
					obj = {
						day: day < 10 ? '0' + day : day,
						hou: hou < 10 ? '0' + hou : hou,
						min: min < 10 ? '0' + min : min,
						sec: sec < 10 ? '0' + sec : sec
					};
					
					if(sec>=10){
						this.appointmentNow[index].finish="超时归还";
						if(this.appointmentNow[index].goodsname==null){
							this.FinishVenue1(index)
						}
						else this.FinishVenue2(index)
					}
				}
			},
			SuccessNowTimeCount(index, startTime) {
				//注：不论安卓还是ios，请将时间如 2020-02-02 20:20:20 转化为 2020/02/02 20:20:20 这种形式后再使用，否则无法转换，如下转换即可↓
				let transedPreTime = startTime.replace(/-/g, '/') //这里转化时间格式为以/分隔形式
				let nowTime = new Date().getTime();
				let preTime = new Date(transedPreTime).getTime()
				let obj = null;
				if (preTime - nowTime <= 0) {
					this.appointmentSuccess[index].placestatus = "正在使用";
					this.appointmentNow.unshift(this.appointmentSuccess[index]);
					this.appointmentSuccess.splice(index, 1);
				}
			},
			async FinishVenue1(i) {
				console.log(this.appointmentNow[i].goodsna)
				var istrue;
				// console.log(this.appointmentNow[i].finish+"  ");
				if(this.appointmentNow[i].finish===null){
					this.appointmentNow[i].finish="按时归还";
					istrue=true;
				}
				else if(this.appointmentNow[i].finish==="超时归还")
					istrue=false;
				const res = await this.$myRequest({
					url: 'PlaceappointmentController/judgePlaceappoinment',
					data:{
						placeid:this.appointmentNow[i].placeid,
						starttime:this.appointmentNow[i].starttime,
						endtime:this.appointmentNow[i].endtime,
						finish:this.appointmentNow[i].finish,
						userid:getApp().globalData.userid
					}
				})
				
				this.appointmentNow[i].state="预约完成";
				this.appointmentFinish.push(this.appointmentNow[i]);
				this.appointmentNow.splice(i,1);
			},
			async FinishVenue2(i) {
				var istrue;
				// console.log(this.appointmentNow[i].finish+"  ");
				if(this.appointmentNow[i].finish===null){
					this.appointmentNow[i].finish="按时归还";
					istrue=true;
				}
				else if(this.appointmentNow[i].finish==="超时归还")
					istrue=false;
				const res = await this.$myRequest({
					url: 'GoodsappointmentController/judgeGoodsappointment',
					data:{
						goodsid:this.appointmentNow[i].goodsid,
						starttime:this.appointmentNow[i].starttime,
						endtime:this.appointmentNow[i].endtime,
						finish:this.appointmentNow[i].finish,
						userid:getApp().globalData.userid,
						rentnum:this.appointmentNow[i].rentnum
					}
				})
				
				this.appointmentNow[i].state="预约完成";
				this.appointmentFinish.push(this.appointmentNow[i]);
				this.appointmentNow.splice(i,1);
			},
			shuaxing(){
				this.appointmentFinish=[];
				this.appointmentshenghe=[];
				this.appointmentNow=[];
				this.appointmentSuccess=[];
				this.appointmentVenue=[];
				this.getAppointmentVenue();
			}
		}
	}
</script>

<style lang="scss">
	swiper {
		margin-top: 20rpx;
		border-top: 1px solid $uni-border-color;
		// height:100vh;

		.swiper-item {
			scroll-view {
				background-color: red;

				.appointAll {
					border-bottom: 1px solid $uni-border-color;
					position: relative;
					height: 150rpx;
					background-color: #fff;

					.myVenueName {
						font-size: 30rpx;
						margin-top: 10rpx;
						float: left;

						text {
							padding-left: 20rpx;
							-top: 20rpx;
						}
					}

					.myVenueStatus {
						float: right;
						margin: 10rpx 20rpx 0 0;

						text {}
					}

					.myVenueStart {
						position: absolute;
						left: 20rpx;
						top: 65rpx;
						font-size: 25rpx;
						color: $u-tips-color;
					}

					.myVenueEnd {
						position: absolute;
						left: 20rpx;
						top: 105rpx;
						font-size: 25rpx;
						color: $u-tips-color;
					}

					.myNews {
						position: absolute;
						right: 20rpx;
						top: 80rpx;
						color: $u-type-success;
					}

					.myVenueWarning {
						position: absolute;
						left: 20rpx;
						top: 105rpx;
						font-size: 25rpx;
						color: $u-type-error;
					}

					.myFinish {
						position: absolute;
						right: 12rpx;
						top: 80rpx;
						width: 130rpx;
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						border: 1px solid $u-type-success;
						color: $u-type-success;
					}
					.myVenueFinish {
						position: absolute;
						right: 20rpx;
						top: 80rpx;
					}
				}
			}
		}
	}
</style>
